<template>
  <view class="bannerContainer">
    <template v-if="goldenPlanList && goldenPlanList.length">
      <!-- 金牌专家方案服务卡片 -->
      <view class="golden-plan-card">
        <view class="golden-plan-title">
          <view class="golden-plan-title-left">
            <view class="golden-plan-title-left-main">金牌专家方案服务</view>
            <view class="golden-plan-title-left-sub">资深专家为您量身打造</view>
          </view>
          <view class="golden-plan-title-right">
            <textVerticalCarouselVue :userAskList="userAskList" />
          </view>
        </view>
        <view class="golden-plan-content">
          <view
            class="golden-plan-content-item"
            v-for="(item, index) in goldenPlanList"
            :key="index"
            @click="handleGoldenPlanItemClick(item)"
          >
            <view class="golden-plan-content-item-left">
              <image
                class="golden-plan-content-item-left-image"
                :src="item.imgUrl"
              ></image>
              <view
                class="golden-plan-content-item-left-desc"
                :style="
                  'background:' +
                  (item.content || 'linear-gradient(#FF8848 0%, #FF6100 100%)')
                "
              >
                {{ item.title }}</view
              >
            </view>
            <view class="golden-plan-content-item-right">
              <template>
                <view class="golden-plan-content-item-right-top">
                  <view class="golden-plan-content-item-right-top-avatar">
                    <image
                      v-for="(_item, _index) in item.children"
                      :class="{
                        'golden-plan-content-item-right-top-avatar-item': true,
                        show: item.activeIndex == _index
                      }"
                      :src="_item.avatarUrl"
                    ></image>
                  </view>
                  <view class="golden-plan-content-item-right-top-desc">{{
                    item.parentTitle || '向陈老师提问'
                  }}</view>
                  <image
                    class="golden-plan-content-item-right-top-icon"
                    src="https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/rightTriangle.svg"
                  >
                  </image>
                </view>
                <view class="golden-plan-content-item-right-mid">
                  <view
                    v-for="(_item, _index) in item.children"
                    :class="{
                      'golden-plan-content-item-right-mid-item': true,
                      active: item.activeIndex == _index
                    }"
                    :key="_index"
                  >
                    {{ _item.content }}
                  </view>
                </view>
              </template>
              <view class="golden-plan-content-item-right-btm">
                <view class="golden-plan-content-item-right-btm-btn">
                  立即提问
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <image
      class="banner"
      mode="widthFix"
      :src="bannerUrl"
      v-if="bannerUrl"
      @click="handleClickBanner"
      :show-menu-by-longpress="careerPathSaleClientId == 123"
    ></image>
  </view>
</template>

<script>
import { addBuryingPoint } from '@/api/modules/career';
import { getStudentHotSearchList } from '@/api/modules/positionDictionary.js';
import textVerticalCarouselVue from '@/pagesSub/components/textVerticalCarousel.vue';
export default {
  components: {
    textVerticalCarouselVue
  },
  props: {
    sourcePath: {
      type: String,
      default: ''
    }
  },
  name: 'Banner',
  data() {
    return {
      activeIndex: 0,
      nextIndex: 1,
      leaveIndex: null,
      goldenPlanList: [],
      userAskList: [],
      goldenPlanContentTimers: [],
      careerPathSaleClientId: '',
      bannerUrl: ''
    };
  },
  created() {
    this.careerPathSaleClientId = getApp().globalData.careerPathSaleClientId;
    // 详情页才用到这个banner.vue
    if (this.careerPathSaleClientId) {
      switch (this.careerPathSaleClientId) {
        case '123':
          this.setBannerUrl(
            'https:' +
              this.$imgBaseSelf +
              'career/positionDictionary/blueCode.png'
          ); //绿色扫码图
          break;
        case 'sznews':
          this.getGoldenPlanData(52);
          // this.setBannerUrl(
          //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.png"
          // );
          break;
        case 'gz':
          this.getGoldenPlanData(51);
          // this.setBannerUrl(
          //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.pngg"
          // ); //绿色点击图
          break;

        default:
          break;
      }
    } else {
      this.getGoldenPlanData(50);
      // this.setBannerUrl(
      //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.png"
      // );
    }
  },
  mounted() {},
  onUnload() {
    this.goldenPlanContentTimers.forEach((item) => {
      clearInterval(item);
    });
  },
  methods: {
    handleGoldenPlanItemClick(item) {
      switch (item.title) {
        //8000
        case '高考志愿定制服务':
          break;
        //699
        case '高考选专业服务':
          this.handleGoldenPlan699BurryPoint();
          break;

        default:
          break;
      }
      let url =
        '/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125';
      if (item.url) {
        url = item.url;
      }
      uni.navigateToMiniProgram({
        appId: 'wx614f8a78fff34162',
        path: url,
        success(res) {},
        fail(err) {}
      });
    },
    handleGoldenPlan699BurryPoint() {
      switch (this.sourcePath) {
        // 薪酬分析
        case 'careerSalaryReport':
          this.addBuryingPointFn(20204, '', '', '', '');
          wx.reportEvent('salary_detail_banner699_click', {}); //薪酬详情—薪酬分析模块-点击banner
          break;
        // 招聘分析
        case 'recruitmentAnalysis':
          this.addBuryingPointFn(20098, '', '', '', '');
          wx.reportEvent('salary_detail_recruit_banner699_click', {}); //薪酬详情—招聘分析模块—点击banner
          break;
        // 专业详情
        case 'majorDetail':
          this.addBuryingPointFn(20203, '', '', '', '');
          wx.reportEvent('major_detail_banner699_click', {}); //专业详情—点击banner
          break;
        // 职业详情
        case 'positionDetail':
          this.addBuryingPointFn(20099, '', '', '', '');
          wx.reportEvent('job_detail_banner699_click', {}); //职业详情—点击banner
          break;
        default:
          break;
      }
    },
    getGoldenPlanData(type) {
      //获取金牌专家方案卡片内容
      this.reqGetStudentHotSearchList(31, 'userAskList');
      this.reqGetStudentHotSearchList(type || 40, 'goldenPlanList', (data) => {
        data.forEach((item, index) => {
          this.$set(item, 'activeIndex', 0);
        });
        // 开启金牌专家方案卡片里的内容动画
        data.forEach((ele, index) => {
          const itemQuestList = ele.children;
          if (itemQuestList && itemQuestList.length) {
            this.goldenPlanContentTimers[index] = setInterval(
              () => {
                ele.activeIndex += 1;
                if (ele.activeIndex >= itemQuestList.length - 1) {
                  ele.activeIndex = 0;
                }
              },
              index == 0 ? 8000 : 13000
            );
          }
        });
      });
    },
    reqGetStudentHotSearchList(searchDataType, prop, callback) {
      const params = {
        searchDataType //查询类型   12 高薪职业 11新兴职业 22 高薪专业 21 高就业率专业排名  30 查询平均薪酬职业 40 标题和banner图动态配置 50 详情页banner配置
      };
      getStudentHotSearchList(params)
        .then((res) => {
          if (res.code == 200) {
            this[prop] = res.data;
            if (callback && typeof callback === 'function') {
              callback(this[prop]);
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    setBannerUrl(url) {
      const that = this;
      wx.downloadFile({
        url,
        success: function (res) {
          if (res.statusCode === 200) {
            that.bannerUrl = res.tempFilePath;
          }
        },
        fail: function (err) {
          console.log('下载失败', err);
        }
      });
    },
    handleClickBanner() {
      // uni.navigateTo({
      //   url: "/pagesSub/career/activity/JuniorCareerConsultantBuy",
      // });//20240611邹凌风废弃，统一变成跳转一览职途小程序

      switch (this.sourcePath) {
        // 薪酬分析
        case 'careerSalaryReport':
          this.addBuryingPointFn(20204, '', '', '', '');
          wx.reportEvent('salary_detail_banner_click', {}); //薪酬详情—薪酬分析模块-点击banner
          break;
        // 招聘分析
        case 'recruitmentAnalysis':
          this.addBuryingPointFn(20098, '', '', '', '');
          wx.reportEvent('salary_detail_recruit_banner_click', {}); //薪酬详情—招聘分析模块—点击banner
          break;
        // 专业详情
        case 'majorDetail':
          this.addBuryingPointFn(20203, '', '', '', '');
          wx.reportEvent('major_detail_banner_click', {}); //专业详情—点击banner
          break;
        // 职业详情
        case 'positionDetail':
          this.addBuryingPointFn(20099, '', '', '', '');
          wx.reportEvent('job_detail_banner_click', {}); //职业详情—点击banner
          break;
        default:
          break;
      }

      // uni.navigateToMiniProgram({
      //   appId: "wx614f8a78fff34162",
      //   path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128317245100125",
      //   success(res) {},
      //   fail(err) {},
      // });

      this.careerPathSaleClientId = getApp().globalData.careerPathSaleClientId;
      console.log(
        '----this.careerPathSaleClientId------->',
        this.careerPathSaleClientId
      );
      if (this.careerPathSaleClientId == 123) {
        return;
      } else if (!this.careerPathSaleClientId) {
        uni.navigateToMiniProgram({
          appId: 'wx614f8a78fff34162',
          path: '/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128317245100125',
          success(res) {},
          fail(err) {}
        });
      } else if (this.careerPathSaleClientId == 'sznews') {
        //深圳新闻网
        wx.reportEvent('sznews_qrcode_click_jump', {});
        uni.navigateToMiniProgram({
          appId: 'wx614f8a78fff34162',
          path: '/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125',
          success(res) {},
          fail(err) {}
        });
      } else if (this.careerPathSaleClientId == 'gz') {
        //贵州
        wx.reportEvent('sznews_qrcode_click_jump', {});
        uni.navigateToMiniProgram({
          appId: 'wx614f8a78fff34162',
          path: '/ec_goods/detail?vid=0&productInstanceId=16868908125&id=128397590100125',
          success(res) {},
          fail(err) {}
        });
      }
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType
      };
      const res = await addBuryingPoint(params);
    }
  }
};
</script>

<style lang="scss" scoped>
.golden-plan-card {
  padding: 36rpx 24rpx;
  // margin: 0 0 36rpx;
  border-radius: 16rpx;
  background-color: white;
  .golden-plan-title {
    display: flex;
    justify-content: space-between;
    &-left {
      &-main {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #222222;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
      &-sub {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #acbac5;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        margin-top: 8rpx;
      }
    }
    &-right {
      display: flex;
      align-items: flex-start;
      position: relative;
      height: 80rpx;
      width: 278rpx;
      overflow: hidden;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 278rpx;

        height: 40rpx;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 0.65),
          rgba(255, 255, 255, 0.65) 50%,
          transparent
        );
      }
    }
  }
  .golden-plan-content {
    margin: 36rpx 0 0;
    &-item {
      display: flex;
      margin-bottom: 36rpx;
      border-radius: 16rpx;
      background: linear-gradient(170deg, #f6fdff 0%, #f6fdff 100%);
      &:last-of-type {
        margin-bottom: 0rpx;
      }
      &-left {
        position: relative;
        &-image {
          width: 268rpx;
          height: 240rpx;
          // background: #8fb6fe;
          // opacity: 0.07;
        }
        &-desc {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0rpx;
          bottom: -2rpx;
          width: 100%;
          height: 74rpx;
          border-radius: 16rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 30rpx;
          color: #ffffff;
        }
      }
      &-right {
        padding: 16rpx 16rpx 18rpx 24rpx;
        border-radius: 0rpx 16rpx 16rpx 0rpx;
        &-top {
          position: relative;
          display: flex;
          align-items: center;
          &-avatar {
            display: grid;
            &-item {
              grid-area: 1 / 1;
              width: 40rpx;
              height: 40rpx;
              border: 1rpx solid #ffffff;
              margin-right: 14rpx;
              border-radius: 50%;
              opacity: 0;
              // transition: opacity 1s ease-in-out;
              visibility: hidden;
              &.show {
                visibility: visible;
                opacity: 1;
              }
            }
          }

          &-desc {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #444444;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
          &-icon {
            width: 24rpx;
            height: 24rpx;
          }
        }
        &-mid {
          display: grid;
          position: relative;
          width: 338rpx;
          height: 80rpx;
          font-family: PingFangSC, PingFang SC;
          // font-weight: 400;
          font-size: 26rpx;
          color: #9baebb;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          white-space: normal;
          overflow: hidden;
          margin-top: 14rpx;
          &-item {
            display: -webkit-box;
            grid-area: 1 / 1;
            width: 338rpx;
            height: 80rpx;
            font-size: 26rpx;
            opacity: 0;
            // transition: opacity 1s ease-in-out;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 40rpx;
            &.active {
              opacity: 1;
              // background-color: white;
              // z-index: 10;
            }
          }
        }
        &-btm {
          margin-top: 18rpx;
          &-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 168rpx;
            height: 56rpx;
            background: #fff2ea;
            border-radius: 200rpx;
            border: 1.6rpx solid #fd6f1a;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #fd6f1a;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
}
.banner {
  // background: url($img-base + "career/positionDictionary/careerSearch_newBanner22.png");
  // background-size: 100% auto;
  // background-repeat: no-repeat;
  // width: 100%;
  // border-radius: 16rpx;
  // margin: 20rpx 0;
  // height: 160rpx;
  width: 100%;
  height: 218rpx;
  margin: 30rpx 0;
}
</style>
